<template>
    <Card style="margin-bottom: 20px" class="data-card">
        <div slot="title">
            <div class="card-title">
                <p v-if="seaFreightType == 1">集装箱号：{{data.containerNo}}</p>
                <p style="width:80%">提运单号：<span>{{ data.blNo }}</span></p>
                <p style="text-align:center;">船名航次：<span>{{ data.rvessel }} {{ data.rvoyage }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px">目的港：<span>{{ data.finlDestName }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px"> 到港时间：<span>{{ data.shipDate ? $utils.dateToDateStr(new Date(data.shipDate)) : '' }}</span></p>
            </div>
            <div class="overdue" v-if="data.contractValidityPeriodEnd && data.contractValidityPeriodEnd < (new Date()).getTime()">
                到港
            </div>
        </div>
        <div class="card-content">
            <Row class="card-word">
                <i-col span="4">
                    <p>
                        发货人：<span>{{ data.shipper }}</span>
                    </p>
                </i-col>
                <i-col span="6">
                    <p>
                        收货人：<span>{{ data.consignee }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        装货港：<span>{{ data.loadPortName }}</span>
                    </p>
                </i-col>
                <i-col span="6">
                    <p>
                        船公司：<span>{{ data.shipName }}</span>
                    </p>
                </i-col>
                <i-col v-if="data.shipNo && data.blNo" span="4" style="display: flex;justify-content: end;">
                    <Dropdown @on-click="dropdownClick" transfer>
                        <p class="speedOfProgress">
                            <span style="font-weight: normal;color: #4f68e8;">查看</span><Icon type="ios-arrow-down" />
                        </p>
                        <DropdownMenu slot="list">
                            <DropdownItem name="shipDynamics">船舶动态</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </i-col>
            </Row>

            <Row style="margin-top: 25px; margin-bottom: 20px" class="card-word">
                <i-col span="4">
                    <p>
                        品类：<span>{{ getMatTypeName(data.goodsTypeName) }}</span>
                    </p>
                </i-col>
                <i-col span="6">
                    <p>
                        箱信息：
                        <span v-if="seaFreightType == 1">{{ data.containerModel }}x1</span>
                        <span v-else>{{ data.containerQty }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        件数：<span v-if="seaFreightType == 1">{{ data.packNum }}</span>
                        <span v-else>{{ data.pieceNum }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        重量(KGS)：<span v-if="seaFreightType == 1">{{ data.packTotalWeight ? (Number(data.packTotalWeight)) : 0 }}</span>
                        <span v-else>{{ Number(data.weight) }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        报关单号：<span>{{ data.bgblNo }}</span>
                    </p>
                </i-col>
                <i-col span="2" style="text-align: right;color: #4F68E8;">
                    <p class="speedOfProgress" @click="speedOfProgressClick">
                        查看详情<Icon type="ios-arrow-down" :class="arrowClass" />
                    </p>
                </i-col>
            </Row>
            <el-collapse-transition>
                <div v-if="speedOfProgressShow" class="circle-container">
                    <Row type="flex" align="middle">
                        <!-- <i-col span="4" style="width: 100%;display: flex;align-items: center">
                            <div style="position: relative">
                                <el-tooltip placement="top" :disabled="!data.reviewStatus">
                                    <i-circle :percent="data.reviewStatus ? 100 : 0" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                        <p>审单</p>
                                    </i-circle>
                                    <div slot="content">
                                        <p v-for="(item, index) in data.reviewInfoMaps" :key="index">{{ item.sataus }}: {{ removeLabel(item.info.remark) }} {{ item.info.statusTime ? $utils.dateToDateStr(new Date(item.info.statusTime)) : '' }}</p>
                                    </div>
                                </el-tooltip>
                                <p v-if="data.reviewStatus && data.reviewTimeMaps" class="circle-title" style="width: 140px;">审单时间{{ data.reviewTimeMaps[0].reviewTime ? $utils.dateToDateStr(new Date(data.reviewTimeMaps[0].reviewTime)) : '' }}</p>
                            </div>
                            <div class="connecting-line" style="width: calc(100% - 60px);"></div>
                        </i-col> -->
                        <i-col span="6" style="width: 100%;display: flex;align-items: center">
                            <div style="position: relative">
                                <el-tooltip placement="top" :disabled="!data.shipFinishedStatus">
                                    <i-circle :percent="data.shipFinishedStatus ? 100 : 0" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                        <p class="demo-Circle-inner">到港</p>
                                    </i-circle>
                                    <div slot="content" v-if="seaFreightType == 0">
                                        <p v-for="(item, index) in data.shipFinishedMaps.boxInfo" :key="index">箱号：{{ item.containerNo }} 重量{{ item.packTotalWeight }}KGS</p>
                                    </div>
                                    <div slot="content" v-if="seaFreightType == 1">
                                        <p v-for="(item, index) in data.shipFinishedMaps.boxInfo" v-if="item.containerNo == data.containerNo" :key="index">箱号：{{ item.containerNo }} 重量{{ item.packTotalWeight }}KGS</p>
                                    </div>
                                </el-tooltip>
                                <p v-if="data.shipFinishedStatus === 0 && data.expectedDepartureDate" class="circle-title" style="width: 120px; margin-left: -30px">{{ data.expectedDepartureDate ? $utils.dateToDateStr(new Date(data.expectedDepartureDate)) : '' }}</p>
                                <p v-if="data.shipFinishedStatus === 1 && data.shipDate" class="circle-title" style="width: 120px; margin-left: -30px">{{ data.shipDate ? $utils.dateToDateStr(new Date(data.shipDate)) : '' }}</p>
                            </div>

                            <div class="connecting-line" style="width: calc(100% - 60px);">
                                    <connecting-line-node top-text="申报" :bottom-text="data.declarationTime && data.shipFinishedStatus === 1 ? $utils.dateToDateStr(new Date(data.declarationTime)) : '未申报' "/>
                            </div>

                            <div class="connecting-line" style="width: calc(100% - 60px);">
                                <el-tooltip placement="top" :disabled="data.checkQuantity == 0">
                                    <connecting-line-node top-text="查验" :bottom-text="data.checkQuantity + '柜'" />
                                    <div slot="content">
                                        <p v-for="(item, index) in data.checkShipContainers" :key="index">
                                            箱号：{{ item.containerNo }} 重量：{{ item.packTotalWeight }}KGS 查验日期：{{ item.checkDate ? $utils.dateToDateStr(new Date(item.checkDate)) : '' }}
                                        </p>
                                    </div>
                                </el-tooltip>
                            </div>
                        </i-col>

                        <i-col span="6" style="width: 100%;display: flex;align-items: center">
                            <div style="position: relative">
                                <i-circle :percent="data.permitThroughStatus ? 100 : 0" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                    <p class="demo-Circle-inner">放行</p>
                                </i-circle>
                                <p v-if="data.permitThroughStatus && data.customsClearanceDate" class="circle-title" style="width: 100px; margin-left: -20px">{{ $utils.dateToDateStr(new Date(data.customsClearanceDate)) }}</p>
                            </div>

                            <div class="connecting-line" style="width: calc(100% - 60px);">
                                <!-- <connecting-line-node top-text="出证" :bottom-text="data.certifiedDate ? $utils.dateToDateStr(new Date(data.certifiedDate)) : ''" /> -->

                                <!-- <el-tooltip placement="top" :disabled="data.notMentionedCount == 0">
                                    <connecting-line-node top-text="未提" :bottom-text="data.notMentionedCount + '柜'" />
                                    <div slot="content">
                                        <p v-for="(item, index) in data.packNumShipContainers" :key="index">箱号：{{ item.containerNo }} 重量：{{ item.packTotalWeight }}KGS</p>
                                    </div>
                                </el-tooltip> -->
                            </div>
                        </i-col>

                        <i-col span="6" style="width: 100%;display: flex;align-items: center">
                            <div style="position: relative">
                                <el-tooltip placement="top" :disabled="data.suitcaseCount == 0">
                                    <i-circle :percent=" data.suitcaseCount == 0 ? 0 : (data.suitcaseCount * 1/(data.suitcaseCount + data.notMentionedCount) * 1) *100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                        <p class="demo-Circle-inner">提箱</p>
                                    </i-circle>
                                    <div slot="content">
                                        <p v-for="(item, index) in data.alreadyPackNumContainers" :key="index">
                                            箱号：{{ item.containerNo }} 重量：{{ item.packTotalWeight }}KGS 提箱日期：{{ item.pickUpDate ? $utils.dateToDateStr(new Date(item.pickUpDate)) : '' }}
                                        </p>
                                    </div>
                                </el-tooltip>
                                <p class="circle-title">{{ data.suitcaseCount }}柜 / {{ seaFreightType == 1 ? 1 : data.shipFinishedMaps.boxInfo.length }}柜</p>
                            </div>

                            <div class="connecting-line" style="width: calc(100% - 60px);">
<!--                                <el-tooltip placement="top" :disabled="data.deliveShipContainersCount == 0">-->
<!--                                    <connecting-line-node top-text="送货" :bottom-text="data.deliveShipContainersCount" />-->
<!--                                    <div slot="content">-->
<!--                                        <p v-for="(item, index) in data.deliveShipContainers" :key="index">-->
<!--                                            箱号：{{ item.containerNo }} 重量：{{ item.packTotalWeight }}KGS 送达日期：{{ item.serviceDate ? $utils.dateToDateStr(new Date(item.serviceDate)) : '' }}-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                </el-tooltip>-->
                                <!-- <el-tooltip placement="top" :disabled="data.returnPackNumContainersCount == 0">
                                    <connecting-line-node top-text="未还箱" :bottom-text="data.returnPackNumContainersCount + '柜'" />
                                    <div slot="content">
                                        <p v-for="(item, index) in data.returnPackNumContainers" :key="index">
                                            箱号：{{ item.containerNo }} 重量：{{ item.packTotalWeight }}KGS
                                        </p>
                                    </div>
                                </el-tooltip> -->
                            </div>
                        </i-col>

                        <i-col span="6" style="width: 100%;display: flex;align-items: center">
                            <div style="position: relative">
                                <el-tooltip placement="top" :disabled="data.alreadyReturnPackNumContainersCount == 0">
                                    <i-circle :percent="data.alreadyReturnPackNumContainersCount == 0 ? 0 :(data.alreadyReturnPackNumContainersCount * 1 / (data.suitcaseCount + data.notMentionedCount) * 1) * 100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                        <p class="demo-Circle-inner">还箱</p>
                                    </i-circle>
                                    <div slot="content">
                                        <p v-for="(item, index) in data.alreadyReturnPackNumContainers" :key="index">
                                            箱号：{{ item.containerNo }} 重量：{{ (item.packTotalWeight).toFixed(2) }}KGS 还箱日期：{{ item.returnDate ? $utils.dateToDateStr(new Date(item.returnDate)) : '' }}
                                        </p>
                                    </div>
                                </el-tooltip>
                                <p class="circle-title">{{ data.alreadyReturnPackNumContainersCount }}柜/ {{ seaFreightType == 1 ? 1 : data.shipFinishedMaps.boxInfo.length }}柜</p>
                            </div>
                        </i-col>
                    </Row>
                </div>
            </el-collapse-transition>
            <div v-if="speedOfProgressShow && seaFreightType == 1" style="margin-top:10px">
                <Row style="margin-bottom: 10px" v-for="(goods,index) in data.shipFinishedMaps.boxInfo" :key="index" v-if="goods.containerNo == data.containerNo">
                    <el-card style="margin: 10px 0;padding: 0 0 15px;background-color: #F4F8FA">
                        <i-col :span="4">
                            <span style="font-weight: 700;">箱号：</span>
                            <span>{{ goods.containerNo }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">箱型：</span>
                            <span>{{ goods.containerModel }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">温度：</span>
                            <span>{{ goods.temperature }}</span>
                        </i-col>
                        <br>
                        <i-col :span="4">
                            <span style="font-weight: 700;">免箱期(天)：</span>
                            <span>{{ data.daysFreeOfCharge }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">到港日期：</span>
                            <span v-if="data.shipDate">{{ $utils.dateToDateStr(new Date(data.shipDate)) }}</span>
                            <span v-if="!data.shipDate"></span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">提箱日期：</span>
                            <span v-if="goods.pickUpDate">{{ $utils.dateToDateStr(new Date(goods.pickUpDate)) }}</span>
                            <span v-if="!goods.pickUpDate"></span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">温度：</span>
                            <span>{{ goods.temperature }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">入库日期：</span>
                            <span v-if="goods.serviceDate">{{ $utils.dateToDateStr(new Date(goods.serviceDate)) }}</span>
                            <span v-if="!goods.serviceDate"></span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">还箱日期：</span>
                            <span v-if="goods.returnDate">{{ $utils.dateToDateStr(new Date(goods.returnDate)) }}</span>
                            <span v-if="!goods.returnDate"></span>
                        </i-col>
                    </el-card>
                </Row>
            </div>
            <div  v-if="speedOfProgressShow && seaFreightType != 1" style="margin-top:10px">
                <Row style="margin-bottom: 10px" v-for="(goods,index) in data.shipFinishedMaps.boxInfo" :key="index">
                    <el-card style="margin: 10px 0;padding: 0 0 15px;background-color: #F4F8FA">
                        <i-col :span="4">
                            <span style="font-weight: 700;">箱号：</span>
                            <span>{{ goods.containerNo }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">箱型：</span>
                            <span>{{ goods.containerModel }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">温度：</span>
                            <span>{{ goods.temperature }}</span>
                        </i-col>
                        <br>
                        <i-col :span="4">
                            <span style="font-weight: 700;">免箱期(天)：</span>
                            <span>{{ data.daysFreeOfCharge }}</span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">到港日期：</span>
                            <span v-if="data.shipDate">{{ $utils.dateToDateStr(new Date(data.shipDate)) }}</span>
                            <span v-if="!data.shipDate"></span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">提箱日期：</span>
                            <span v-if="goods.pickUpDate">{{ $utils.dateToDateStr(new Date(goods.pickUpDate)) }}</span>
                            <span v-if="!goods.pickUpDate"></span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">入库日期：</span>
                            <span v-if="goods.serviceDate">{{ $utils.dateToDateStr(new Date(goods.serviceDate)) }}</span>
                            <span v-if="!goods.serviceDate"></span>
                        </i-col>
                        <i-col :span="4">
                            <span style="font-weight: 700;">还箱日期：</span>
                            <span v-if="goods.returnDate">{{ $utils.dateToDateStr(new Date(goods.returnDate)) }}</span>
                            <span v-if="!goods.returnDate"></span>
                        </i-col>
                    </el-card>
                </Row>
            </div>
        </div>
    </Card>
</template>

<script>
import _ from 'lodash';
import ConnectingLineNode from '@/view/orderQuery/component/connecting-line-node.vue';
export default {
    name: 'dataCard',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        seaFreightType: {
            type: Number,
            default: 0
        },
        dictInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    components: {
        ConnectingLineNode
    },
    data() {
        return {
            speedOfProgressShow: false,
            arrowClass: '',
            viewDetailsShow: false,
            viewDetailsClass: ''
        };
    },
    methods: {
        dropdownClick(name) {
            if (name === 'shipDynamics') {
                if (this.data.shipNo && this.data.blNo) {
                    let url = 'http://139.155.249.104:7029/data/ocean/iframe?isExport=I&appcode=quyan_data_new&key=40bb285b-303f-4165-81ea-d4f611ccccc1' + '&billNo=' + this.data.blNo + '&carrierCode=' + this.data.shipNo;
                    window.open(url, '_blank');
                }
            }
        },
        removeLabel(srt) {
            return srt.replace(/<[^>]+>/g,"");
        },
        speedOfProgressClick() {
            this.speedOfProgressShow = !this.speedOfProgressShow;
            if (this.speedOfProgressShow) {
                this.arrowClass = 'top-arrow';
            } else {
                this.arrowClass = 'bottom-arrow';
            }
        },
        viewDetailsClick() {
            this.viewDetailsShow = !this.viewDetailsShow;
            if (this.viewDetailsShow) {
                this.viewDetailsClass = 'top-arrow';
            } else {
                this.viewDetailsClass = 'bottom-arrow';
            }
        },
        getMatTypeName(matTypeStr) {
            if (matTypeStr) {
                let matTypeCodeList = matTypeStr.split(',');
                return  _.uniq(matTypeCodeList).map(x => this.$utils.handleDictData(x, this.dictInfo.matType)).join(',');
            } else {
                return '';
            }
        }
    }
};
</script>

<style lang="less">
</style>
<style scoped lang="less">
.connecting-line {
    height: 2px;
    background-color: #4f68e8;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.circle-container {
    //display: flex;
    //justify-content: space-between;
    margin-left: 200px;
    color: #4d66e2;
    font-size: 15px;
    padding-bottom: 20px;
    .left-circle, .right-circle {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-left: 30px;
    }
    .right-circle {
        padding-right: 60px;
    }
    .left-circle-container {
        width: 90%;
    }
    .right-circle-container {
        width: 66%;
    }

    .circle-title {
        word-break: keep-all;
        overflow-wrap: normal;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        text-align: center;
        position: absolute;
        width: 100%;

        span {
            font-weight: 700;
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
        }
    }
}
.flex-class {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    display: flex;
    width: 80%;
    text-align: center;
    height: 30px;
    p {
        border-right: 1px solid #d9d9d9;
        height: 30px;
        line-height: 30px;
        span {
            font-weight: normal;
        }
    }
    p:first-child {
        text-align: left;
    }
    p:first-child, p:last-child {
        border: none;
    }
}

.card-word {
    p {
        font-weight: 700;

        span {
            font-weight: 500;
        }
    }
}

@keyframes arrowChange {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes arrowChange2 {
    100% {
        transform: rotate(0);
    }
}
.speedOfProgress {
    cursor: pointer;
    font-weight: normal !important;
}
.top-arrow {
    animation: arrowChange .5s;
    animation-fill-mode: forwards;
    transform: rotate(0);
}
.bottom-arrow {
    animation: arrowChange2 .5s;
    animation-fill-mode: forwards;
    transform: rotate(180deg);
}

.font-weight-bold {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
}

.overdue {
    width: 92px;
    height: 32px;
    background-color: rgba(214, 3, 3, 1);
    border-bottom-left-radius: 50px;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    text-align: center;
    line-height: 32px;
}
</style>
